<template>
  <div>
    <el-card>
      <el-row>
        <el-col>
          <el-button type="success" icon="el-icon-edit" size="small" @click="dialogFormV">添加菜单</el-button>
        </el-col>
      </el-row>
      <el-table :data="menuList" stripe style="width: 100%" row-key="id" default-expand-all :toggleRowExpansion="false"
        :tree-props="{children: 'childs', hasChildren: 'true'}">
        <el-table-column label="标题" width="180" prop="title">
          <template slot-scope="{row}">
            <i :class="className[row.level]" style="margin-right:10px; font-size:17px;"></i>
            <span>{{row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限点代码" prop="code">
        </el-table-column>
        <el-table-column label="操作" width="180" class="operation" align="center">
          <template slot-scope="scope">
            <el-button type="primary" plain icon="el-icon-edit" circle @click="handle_Edit(scope.row)"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" circle @click="removeList(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加菜单组件 -->
      <menuAdd :text="title" ref="mychild" @newDataes="getMenuList"></menuAdd>
    </el-card>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
import menuAdd from '../components/menu-add.vue'
export default {
  components: {
    menuAdd
  },
  data () {
    return {
      list: [],
      menuList: [],
      dialogFormVisible: false,
      title: '',
      className: {
        1: 'el-icon-folder-opened',
        2: 'ivu-icon fa fa-file-o fa-fw',
        3: 'el-icon-view'
      }
    }
  },

  created () {
    this.getMenuList()
  },

  methods: {
    async getMenuList () {
      const { data: res } = await list()
      // const res = await list()
      this.menuList = res
      // console.log(res)
      res.forEach((item, index) => {
        item.level = 1
        if (item?.childs) {
          item.childs.forEach((obj, index) => {
            obj.childs = obj.points
            obj.level = 2
            if (obj?.childs && obj.childs.length > 0) {
              obj.childs = obj.points
              obj.childs.forEach((obj1, index) => {
                obj1.level = 3
              })
            }
          })
        }
      })
    },
    dialogFormV () {
      this.$refs.mychild.dialogFormV()
      this.$refs.mychild.handleResetForm()
      this.title = '添加'
      this.$refs.mychild.handleResetForm()
    },
    handle_Edit (row) {
      this.title = '编辑'
      const flag = row.is_point ? 'points' : 'menu'
      this.$refs.mychild.changeType(flag)
      this.$refs.mychild.dialogFormV()
      this.$refs.mychild.hanldeEditForm(row.id)
      // debugger
    },
    async removeList (id) {
      // console.log(id)
      const confirmResult = await this.$confirm('此操作将永久删除该列表, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
        // 如果用户点击确认，则confirmResult 为'confirm'
        // 如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
      ).catch(err => err)
      // 判断用户是否确定删除
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      await remove({ id })
      // if (res.request.status !== 200) {
      //   return this.$message.error('删除列表失败')
      // }
      this.$message.success('删除列表成功')
      this.getMenuList()
    }
  }
}
</script>

<style scoped lang='less'>
.el-card {
  min-width: 1050px;
  margin: 10px;
}
.el-row {
  text-align: right;
  margin-right: 25px;
  margin-bottom: 10px;
}
/deep/.el-icon-arrow-right {
  display: none !important;
}
/deep/.el-table__row {
  height: 57px !important;
}
</style>
